﻿@page "/templateform"

@using NorthwindBlazor.Data
@using NorthwindBlazor.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inject NorthwindContext dbContext

    <h1 style="display:inline">TemplateForm</h1><a style="margin-left: 10px" href="https://github.com/akorchev/blazor.radzen.com/blob/master/Pages/TemplateFormPage.razor" target="_blank">[source code]</a>

<p>This page demonstrates TemplateForm features.</p>

@if (order == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
        <div class="col-md-12">
            <RadzenTemplateForm Data="@order" Submit="@((Order args) => { Submit(args); })">
                <ChildContent>
                    <RadzenCard>
                        <ChildContent>
                            <div class="row">
                                <div class="col-md-6">
                                    <RadzenFieldset Text="Purchase Info">
                                        <ChildContent>
                                            <div class="row">
                                                <div class="col-md-4 align-items-center d-flex">
                                                    <RadzenLabel Text="Credit Card">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-8">
                                                    <RadzenDropDown AllowClear="true" Placeholder="Select something" Data="@cards" style="width: 100%;" TextProperty="CardNr" ValueProperty="CardId" Name="CardId">
                                                    </RadzenDropDown>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 align-items-center d-flex">
                                                    <RadzenLabel Text="Card #">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-8">
                                                    <RadzenTextBox style="width: 100%;" Name="CardNr">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 align-items-center d-flex">
                                                    <RadzenLabel Text="Expiry Date">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-8">
                                                    <RadzenDatePicker style="width: 100%;" Name="ExpiryDate">
                                                    </RadzenDatePicker>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 align-items-center d-flex">
                                                    <RadzenLabel Text="Cardholder">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-8">
                                                    <RadzenTextBox style="width: 100%;" Name="CardHolder">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                        </ChildContent>
                                    </RadzenFieldset>
                                    <RadzenFieldset Text="Contact Info">
                                        <ChildContent>
                                            <div class="row">
                                                <div class="col-md-4 align-items-center d-flex">
                                                    <RadzenLabel Text="Name">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-8">
                                                    <RadzenTextBox style="width: 100%;" Name="Name">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                            <RadzenTabs SelectedIndex="0">
                                                <Tabs>
                                                    <RadzenTabsItem Text="Billing Address">
                                                        <ChildContent>
                                                            <div class="row">
                                                                <div class="col-md-4 align-items-center d-flex">
                                                                    <RadzenLabel Text="Country">
                                                                    </RadzenLabel>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <RadzenDropDown Placeholder="USA" Data="@countries" style="width: 100%;" TextProperty="Name" ValueProperty="Id" Name="Country">
                                                                    </RadzenDropDown>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4 align-items-center d-flex">
                                                                    <RadzenLabel Text="City">
                                                                    </RadzenLabel>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <RadzenTextBox style="width: 100%;" Name="City">
                                                                    </RadzenTextBox>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4 align-items-center d-flex">
                                                                    <RadzenLabel Text="Address Line 1">
                                                                    </RadzenLabel>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <RadzenTextBox style="width: 100%;" Name="Address1">
                                                                    </RadzenTextBox>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4 align-items-center d-flex">
                                                                    <RadzenLabel Text="Address Line 2">
                                                                    </RadzenLabel>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <RadzenTextBox style="width: 100%;" Name="Address2">
                                                                    </RadzenTextBox>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4 align-items-center d-flex">
                                                                    <RadzenLabel Text="State/Province/Region">
                                                                    </RadzenLabel>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <RadzenTextBox style="width: 100%;" Name="State">
                                                                    </RadzenTextBox>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4 align-items-center d-flex">
                                                                    <RadzenLabel Text="Zip/Postal Code">
                                                                    </RadzenLabel>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <RadzenTextBox style="width: 100%;" Name="Zip">
                                                                    </RadzenTextBox>
                                                                </div>
                                                            </div>
                                                        </ChildContent>
                                                    </RadzenTabsItem>
                                                    <RadzenTabsItem Selected="false" Text="Shipping Address">
                                                    </RadzenTabsItem>
                                                </Tabs>
                                            </RadzenTabs>
                                        </ChildContent>
                                    </RadzenFieldset>
                                </div>
                                <div class="col-md-6">
                                    <RadzenFieldset Text="Store Info">
                                        <ChildContent>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-2">
                                                    <RadzenLabel Text="Store #">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-10">
                                                    <RadzenTextBox Placeholder="123" style="width: 45.3125px;" Name="StoreId">
                                                    </RadzenTextBox>
                                                    <RadzenButton ButtonStyle="info" Icon="add_location" style="margin-left: 11px; width: 166.046875px;" Text="Locate store">
                                                    </RadzenButton>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-2">
                                                    <RadzenLabel Text="Name">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-10">
                                                    <RadzenTextBox Disabled="true" Placeholder="The warehouse" style="width: 100%;" Name="Warehouse">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-2">
                                                    <RadzenLabel Text="Region">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-3">
                                                    <RadzenTextBox Disabled="true" Placeholder="West" style="width: 100%;" Name="Region">
                                                    </RadzenTextBox>
                                                </div>
                                                <div class="align-items-center d-flex col-md-2">
                                                    <RadzenLabel Text="System">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-5">
                                                    <RadzenTextBox Disabled="true" Placeholder="US" style="width: 100%;" Name="System">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                        </ChildContent>
                                    </RadzenFieldset>
                                    <RadzenFieldset Text="POS Info">
                                        <ChildContent>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-3">
                                                    <RadzenLabel Text="Trans #">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-9">
                                                    <RadzenTextBox Disabled="true" Placeholder="S4485" style="width: 100%;" Name="TransId">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-3">
                                                    <RadzenLabel Text="Register">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-9">
                                                    <RadzenTextBox Disabled="true" Placeholder="Register #4" style="width: 100%;" Name="Register">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-3">
                                                    <RadzenLabel Text="Clerk">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-9">
                                                    <RadzenTextBox Disabled="true" Placeholder="Jane Doe" style="width: 100%;" Name="Clerk">
                                                    </RadzenTextBox>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-3">
                                                    <RadzenLabel Text="Amount">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-3">
                                                    <RadzenNumeric Placeholder="300" style="width: 100%;" Name="Amount" TItem="decimal">
                                                    </RadzenNumeric>
                                                </div>
                                                <div class="align-items-center d-flex col-md-2">
                                                    <RadzenLabel Text="Tax">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-4">
                                                    <RadzenNumeric Placeholder="123" style="width: 100%;" Name="Tax" TItem="decimal">
                                                    </RadzenNumeric>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="align-items-center d-flex col-md-3">
                                                    <RadzenLabel Text="Order Date">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-3">
                                                    <RadzenDatePicker style="width: 100%;" Name="OrderDate">
                                                    </RadzenDatePicker>
                                                </div>
                                                <div class="align-items-center d-flex col-md-2">
                                                    <RadzenLabel Text="Ship Date">
                                                    </RadzenLabel>
                                                </div>
                                                <div class="col-md-4">
                                                    <RadzenDatePicker style="width: 100%;" Name="ShipDate">
                                                    </RadzenDatePicker>
                                                </div>
                                            </div>
                                        </ChildContent>
                                    </RadzenFieldset>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-md-12 d-flex align-items-end justify-content-center" style="margin-top: 16px;">
                                    <RadzenButton ButtonType="submit" Icon="save" Text="Save">
                                    </RadzenButton>
                                    <RadzenButton ButtonStyle="light" Icon="cancel" style="display: inline-block; margin-left: 10px;" Text="Cancel" Click="@Cancel">
                                    </RadzenButton>
                                </div>
                            </div>
                        </ChildContent>
                    </RadzenCard>
                </ChildContent>
            </RadzenTemplateForm>
        </div>
    </div>
}

@code {
    public class Order
    {
        public int CardId { get; set; }
        public string CardNr { get; set; }
        public DateTime ExpiryDate { get; set; }
        public string CardHolder { get; set; }
        public string Name { get; set; }
        public string Address1 { get; set; }
        public string Address2 { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }
        public string Country { get; set; }
        public int StoreId { get; set; }
        public string Warehouse { get; set; }
        public string Region { get; set; }
        public string System { get; set; }
        public int TransId { get; set; }
        public string Register { get; set; }
        public string Clerk { get; set; }
        public decimal Amount { get; set; }
        public decimal Tax { get; set; }
        public DateTime OrderDate { get; set; }
        public DateTime ShipDate { get; set; }
    }

    public class CreditCard
    {
        public int CardId { get; set; }
        public string CardNr { get; set; }
    }

    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    Order order = new Order()
    {
        ExpiryDate = DateTime.Parse("10/10/2022"),
        OrderDate = DateTime.Now,
        ShipDate = DateTime.Now
    };

    List<CreditCard> cards = new List<CreditCard>()
{
        new CreditCard() { CardId = 1, CardNr = "5555555555554444" },
        new CreditCard() { CardId = 2, CardNr = "4012888888881881" }
    };

    List<Country> countries = new List<Country>()
{
        new Country() { Id = 1, Name = "USA" },
        new Country() { Id = 2, Name = "Germany" }
    };

    void Submit(Order arg)
    {
        //
    }

    void Cancel()
    {
        //
    }
}
